Automatic Pop Up Chat
# 👀feature-requestsm
many-exabyte-55344
07/28/2023, 10:04 AMWhen you get to the webpage where the chatbubble is integrated, it will automatically open a new chat. Also the option that It will open up and start and new conversation by sending a few messages
c
clean-notebook-57045
08/04/2023, 6:25 PMI'm hoping this will be the next release. My customers are asking for this feature.
b
billions-yacht-29034
08/04/2023, 8:28 PMthis one i will love too
f
freezing-printer-49373
08/04/2023, 9:05 PMexposing to at @plain-lifeguard-16679 and @bright-magazine-792 vor visibility 🙂
l
late-crowd-66808
08/05/2023, 2:54 AMa must have
q
quiet-raincoat-89190
08/07/2023, 10:57 AMyes, need this
f
fresh-fireman-491
08/07/2023, 11:02 AMpretty sure it can be done with some python and html
c
curved-traffic-50479
08/07/2023, 12:26 PMYes we want the feature
h
happy-address-27036
08/24/2023, 3:17 PMThis would be really useful, alongsie with https://discord.com/channels/1108396290624213082/1135259613948821545 and https://discord.com/channels/1108396290624213082/1133825280511856670
g
gentle-shampoo-88367
08/26/2023, 6:43 PMgentle-shampoo-88367
08/26/2023, 6:46 PMh
happy-address-27036
09/01/2023, 8:00 PMThis would be awesome!
g
great-yak-37157
09/01/2023, 11:06 PMIsn't this already achievable? The docs suggest you can send triggers ...https://botpress.com/docs/cloud/toolbox/events-triggers/ Should be straightforward
g
gentle-shampoo-88367
09/02/2023, 2:32 PMThe t3xt in the bubble is not something provided by BotPress
f
flat-terabyte-87123
09/03/2023, 5:55 PMits already possible
flat-terabyte-87123
09/03/2023, 5:56 PMjust send an event with type:"show"
flat-terabyte-87123
09/03/2023, 5:56 PMas soon as the page loads
b
billions-yacht-29034
09/04/2023, 1:57 PMhi can i see an example?
billions-yacht-29034
09/04/2023, 1:58 PMor you can tell us the steps
a
adventurous-animal-68205
09/04/2023, 2:30 PMYou can achieve this with javascript by popping up the chat at a specific time or after a specific event e.g. user scrolls past x position on page
adventurous-animal-68205
09/04/2023, 2:31 PMAnother option is to create a chat bubble with html and css and change the visibility to show after a certain point, then use the click from this element as a trigger for botpress
adventurous-animal-68205
09/04/2023, 2:32 PM
document.getElementById('popup').addEventListener('click', function (){
window.botpressWebChat.sendEvent({ type: "show" })
window.botpressWebChat.sendEvent({ type: 'trigger'})
});
document.getElementById('popup2').addEventListener('click', function (){
window.botpressWebChat.sendEvent({ type: "show" })
window.botpressWebChat.sendEvent({ type: 'trigger'})
});
adventurous-animal-68205
09/04/2023, 2:32 PMI hid the botpress toggle with css and then replaced with my own, then used this code to trigger the bot on click
f
flat-terabyte-87123
09/05/2023, 8:22 PM⬆️
f
fierce-evening-56939
09/17/2023, 9:48 AM@adventurous-animal-68205
Hello I would really love to achieve this. My only is that I am good at JavaScript. Only trying to follow your instructions.
What do you mean by botpress toggle with css.?
q
quiet-raincoat-89190
09/18/2023, 2:15 PMI saved this, someone posted. Check maybe it helps you.
quiet-raincoat-89190
09/18/2023, 2:15 PMHTML:
¿Necesitas más ayuda?
Might I help you with something
CSS:
/* Chat-bubble style /
.chat-bubble {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
/ Adicional Style for chat-bubble /
}
/ Chat-bubble that offers help style /
.help-popup {
display: none;
position: fixed;
bottom: 110px;
right: 50px;
width: 200px;
height: auto;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
z-index: 9999;
animation: slide-up 0.3s ease-in-out;
}
.help-popup-content {
padding: 10px;
text-align: center;
}
/ Uplifting animation style for chat-bubble */
@keyframes slide-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
JS:
// Global Variables
var chatBubble = document.getElementById('chat-bubble');
var helpPopup = document.getElementById('help-popup');
var openChatButton = document.getElementById('open-chat-button');
// Event on click chat-bubble
chatBubble.addEventListener('click', function() {
helpPopup.style.display = 'block';
});
// Event on click
openChatButton.addEventListener('click', function() {
// Aquí puedes agregar la lógica para abrir el chat
}); (edited)
Styles and animations can be customized according to your needs and preferences. You can adjust the positioning properties (bottom and right) and add additional styles to achieve the desired appearance of the help bubble.
In case you want a img as background,
ad this in the CSS
background-image: url('image-path.jpg');
f
fierce-evening-56939
09/19/2023, 9:08 AMThanks I really appreciate for the reply.
Actually I had my write up wrong. Am not good at understanding codes. Infact am lost.
Currently I have been playing around with botpress document codes to embed on my website.. But still not looking pretty on my website. How do I apply this codes to work..
I would really appreciate you demonstrate this on a loom video..
Thanks
fierce-evening-56939
09/19/2023, 9:08 AMI really need some coaching here. Am spending so much time to understand all of this
fierce-evening-56939
09/19/2023, 9:36 AMDo I embed these codes directly on my webpage or how else do I go about it?
m
mysterious-cricket-72777
09/19/2023, 11:44 AMWe need that one
mysterious-cricket-72777
09/19/2023, 11:47 AMCould you give me the code u use the get than welcome message
j
jolly-policeman-82775
09/19/2023, 3:08 PMWE NEED THAT ONE !!!
q
quiet-raincoat-89190
09/19/2023, 3:19 PMI think its in body of your site, but not sure. Didn't test it and dont have experience with front end, much.
f
fierce-evening-56939
09/19/2023, 6:22 PMThanks Martin
So time consuming. I had to use botpress chatbot in div codes as a widget..
fierce-evening-56939
09/20/2023, 12:32 AMFinally I figured it out 😆
q
quiet-raincoat-89190
09/20/2023, 1:06 AMgreat man, how didyou make it ?:P I have that in mind, but still polishing q/a atm, its tricky with real estate, never ends.
j
jolly-policeman-82775
09/20/2023, 2:22 AMhes not willing to share man :/ ay Unique SAHRING IS CARING !
jolly-policeman-82775
09/20/2023, 2:45 AMsorry for caps***
f
fierce-evening-56939
09/20/2023, 5:11 AMThough it's not actually an automatic pop. But something very close. The button pops and it shows the conversation in the bot without starting a chat..
j
jolly-policeman-82775
09/20/2023, 5:23 AMi need that please
f
fierce-evening-56939
09/20/2023, 5:27 AMMake sure you share too when you have a solution. It really took me 3night of restlessness to get this code together..
I will send the codes later when I come on sit.. Hold on...
j
jolly-policeman-82775
09/20/2023, 5:32 AMthank you
m
mysterious-cricket-72777
09/20/2023, 5:33 AMMe too🙏
f
fierce-evening-56939
09/21/2023, 4:45 AM
window.botpressWebChat.init({
"composerPlaceholder": "Talk to me",
"botConversationDescription": "Kismet Digital Hub",
"botId": "7e3c4a11-231e-4216-9ebf-fe199b3ef692",
"hostUrl": "https://cdn.botpress.cloud/webchat/v0"
"messagingUrl": "https://messaging.botpress.cloud",
"clientId": "7e3c4a11-231e-4216-9ebf-fe199b3ef892",
"lazySocket": true,
"frontendVersion": "v0",
"showPoweredBy": true,
"className": "", // Removed extra single quotes
"showConversationsButton": true, // Removed extra single quotes
"stylesheet": "https://webchat-styler-css.botpress.app/prod/456155b5-798e-4da0-ae3f-9e873689c892/v88073/style.css" // Removed extra single quotes
});
window.botpressWebChat.onEvent(function () { window.botpressWebChat.sendEvent({ type: 'show' }); }, ['LIFECYCLE.LOADED']);
j
jolly-policeman-82775
09/21/2023, 2:00 PMTHANK YOU !
jolly-policeman-82775
09/21/2023, 2:00 PMwhere should i put it ?
jolly-policeman-82775
09/21/2023, 2:40 PMand what are these links ?
c
clean-xylophone-13519
09/21/2023, 9:28 PMOoo, this would be great.
m
mysterious-cricket-72777
09/22/2023, 5:19 AMCan you just copy paste it into website
f
fierce-evening-56939
09/22/2023, 5:25 AMYes place on the embed code area around the footers
j
jolly-policeman-82775
09/22/2023, 6:31 AMaroud the footes ?
m
mysterious-cricket-72777
09/22/2023, 8:50 AMThanks what’s the footers
f
fierce-evening-56939
09/22/2023, 9:15 AMI mean you embed coded Inside your website builder around the footers area.
Mine is Groovepages
j
jolly-policeman-82775
09/22/2023, 3:47 PMwhat links should i put in there ?
f
famous-jewelry-85388
09/25/2023, 8:52 PMHey guys, check here: https://discord.com/channels/1108396290624213082/1154525992476479538
j
jolly-policeman-82775
09/27/2023, 5:01 AMGet this into features
jolly-policeman-82775
09/27/2023, 5:01 AMbecuase we need this !
19 Views